<template>
    <MyCard>
        <div class="title">
            <div></div>
            服务包管理
        </div>
        <div class="menu-container">
            <el-space>
                <span style=" font-size: 13px;color: #999999;">服务包状态</span>
                <el-select v-model="choseServiceState" placeholder="请选择" style="width: 200px">
                    <el-option v-for="item in serviceState" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
                <el-input style="width: 376px;height: 40px;" placeholder="请输入关键字" :suffix-icon="Search"
                    v-model="searchInput" @blur="searchEvent(searchInput)" />
            </el-space>

            <router-link to="/data/servicePack/add"><el-button type="primary"> 新增服务包</el-button></router-link>
        </div>

        <div class="servicePacksList">
            <template v-for="item in servicePacksTypesArray" class="">
                <div style="margin-bottom: 20px; margin-top: 20px;">{{ item.type }}</div>
                <div class="typeItemContainer">
                    <template v-for="temp in servicePacksArray.filter(i => i.type == item.type)">
                        <div class="packsItem">
                            <el-image style="width: 100px; height: 100px;margin: 0 20px;flex-shrink: 0;"
                                :src="temp.image"></el-image>
                            <div>
                                <div style="font-size: 16px;line-height: 28px;margin-bottom: 15px;">{{ temp.name }}
                                </div>
                                <div style="font-size: 12px; color: #999999;line-height: 28px;margin-bottom: 15px;">
                                    服务对象:{{ temp.client }}
                                </div>
                                <div style="height: 30px; overflow: hidden;">
                                    <el-tag :type="tagColor(j.name)" v-for="j in temp.serviceItemIds"
                                        style="border-radius: 24px; font-size: 12px; margin-right: 5px;margin-bottom: 10px; ">{{
                                            j.name
                                        }}</el-tag>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </MyCard>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue';
import { findServicePacksApi, getServicePacksTypesApi } from '../../../api/servicePacks';
import MyCard from '../../../components/MyCard.vue';

const serviceState = ref([
    { name: '全部', value: 4 },
    { name: '待审核', value: 1 },
    { name: '使用中', value: 2 },
    { name: '已驳回', value: 0 },
    { name: '已停用', value: 3 },
]);
const choseServiceState = ref();
const searchInput = ref('');
const servicePacksTypesArray = ref([]);
const servicePacksArray = ref([]);
// const tagColor = ref('primary')
onMounted(() => {
    getServicePacksTypes();
    findServicePacks();
})

watch(choseServiceState, () => {
    if (choseServiceState.value != 4) {
        findServicePacksApi({ state: choseServiceState.value }).then(res => {
            if (res.code == 200) {
                servicePacksArray.value = res.data.rows;
            }
        })
    } else {
        findServicePacks();
    }

})

function tagColor(item) {
    if (item == '高血压随访服务') {
        return 'danger'
    }
}
function findServicePacks() {
    findServicePacksApi().then(res => {
        if (res.code == 200) {
            servicePacksArray.value = res.data.rows;
        }
    })
}

function getServicePacksTypes() {
    getServicePacksTypesApi().then(res => {
        if (res.code == 200) {
            servicePacksTypesArray.value = res.data
        }
    })
}
function searchEvent(data) {
    findServicePacksApi({ name: data }).then(res => {
        if (res.code == 200) {
            servicePacksArray.value = res.data.rows;
        }
    })
}
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    line-height: 1;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);
    margin-bottom: 20px;

    div {
        margin-top: -1px;
        width: 6px;
        height: 23px;
        background-color: rgba(41, 132, 248, 1);
        margin-right: 10px;
        border-radius: 60px;
    }


}

.menu-container {
    display: flex;
    justify-content: space-between;
}


.typeItemContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px 20px;

}

.packsItem {
    width: 350px;
    height: 150px;
    background-color: #ffffff;
    visibility: inherit;
    box-sizing: border-box;
    border-width: 1px;
    border-color: rgba(242, 242, 242, 1);
    border-radius: 8px;
    box-shadow: 0px 0px 15px rgba(242, 242, 242, 1);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.packsItem:hover {
    background-color: rgb(248, 244, 244);
}
</style>